<template>
    <el-dialog class="login-tips-dialog" :modal-class="!dialogStore.loginCancelBtn ? 'mask__blur' : ''"
        v-model="dialogStore.isLoginTipsDialogVisible" append-to-body :close-on-click-modal="false"
        :close-on-press-escape="false" :show-close="false" width="200" top="30vh" center>
        请先登录
        <template #footer>
            <el-button @click="onClose()" size="small">
                {{ dialogStore.loginCancelBtn ? "取消" : "返回" }}
            </el-button>
            <el-button type="primary" size="small" @click="onLogin()">
                去登录
            </el-button>
        </template>
    </el-dialog>
</template>
<script setup>
const pageStore = usePageStore();
const dialogStore = useDialogStore();
const router = useRouter();

const onClose = async () => {
    if (!dialogStore.loginCancelBtn) {
        router.back();
        setTimeout(() => {
            dialogStore.isLoginTipsDialogVisible = false;
        }, 600);
    } else {
        dialogStore.isLoginTipsDialogVisible = false;
        pageStore.urlParams = {};
        pageStore.scoreParams = {};
        pageStore.isLoginOpen = false;
    }
};

const onLogin = () => {
    navigateTo("/login.html");
    dialogStore.isLoginTipsDialogVisible = false;
    pageStore.onConfirm && pageStore.onConfirm();
};
</script>
<style lang="scss">
.login-tips-dialog {
    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 20px !important;
        text-align: center !important;
    }
}

.mask__blur {
    backdrop-filter: blur(10px);
}
</style>
